可视化原理在数据产品中的应用
豆皮粉儿们，又见面了，今天这一期，由字节跳动数据平台的「邶海」，带大家学习可视化原理在数据产品中的应用。
欢迎加入我们团队，后台回复内推，「豆皮范儿」后台回复加群，欢迎咨询和交流。
数据产品与可视化
数据产品是什么？数据产品是指结合数据仓库、报表查询、数据分析等能力，为企业的决策提供数据支撑的技术和应用。
随着计算机硬件的发展以及数据处理算法的进步，越来越多的数据产品结合了数据转换和图表可视化的能力。
数据产品与可视化的关系
在数据决策最终落地的过程中，数据可能经过企业运营、数据分析师、企业决策者等多个角色。因此每当数据需要与人进行接触的时候，就需要进行一次数据的呈现。
众所周知，人的眼睛对于图像图形的接受程度和理解速度远远高于阅读数字本身，而数据可视化的作用，正是使用图形的方式将数据及其代表的结论，通过视觉方式快速传递给数据阅读者。正因为如此，数据产品普遍都会使用数据可视化的方式来展示数据，给用户带来更加直观的信息传递。
数据可视化理论基础
为何要建立一套数据可视化的理论体系
数据可视化本身并不复杂，用最通俗的话来讲就是绘制图表，我们可以轻易地了解到许多优秀的图表库都可以实现这样的功能。但是在可视化发展的过程中，人们很快意识到了一个棘手的问题，那就是工作量始终无法收敛。
举一个例子，假如我们需要通过一些数据绘制一组柱状图，这比较容易。即使没有可视化开发背景的同学应该也能快速地实现。
但接下来的事情难度就越来越大：如何能适应不同结构的数据、如何开放足够的自由度供用户自定义、如何在开放高定制能力的同时保持接口简洁易用、如何设计一套通用的接口能够让用户对于不同图表类型也能触类旁通。假如这些问题还能解决，那么还有更高的难度：如何对多种图表类型进行组合。
图表的类型是无穷无尽的，通过穷举方式，永远无法满足所有用户的需求。叠加上图表组合之后，开发图表的工作量只会不断上升，而不会收敛。
因此我们需要一套理论框架 —— 将所有的图表类型囊括在内的理论框架。这样一来，即使有一天看到一个从来没有见过的图表类型，即使叫不出这个图表的名字，但我们知道，它一定可以在这套理论里找到一个位置。
图形语法
图形语法就是这样的一套理论框架，它的核心思想是：虽然不能穷举所有的图表类型，但可以穷举所有的图形类型，并将数据与图形的属性进行绑定。因为任何图表都是由图形构成的，使用数据控制图形属性即可实现数据的可视化。下面我为大家分享一些图形语法中的一些重要概念。
图形语法中的重要概念
维度/指标
维度：维度是对一个原始的数据集进行切分的方式，用于描述数据可以被分为多少类，一般由代表离散数据的字段组成。
指标：指标也被称为度量，是衡量一个属性程度的方式，一般由可量化、可比较的字段组成。
视觉通道
要理解视觉通道，先得了解通过图形语法是如何绘制图表的。图形几何元素的类型是可以穷举的，常用于作图的几何元素无非就几种：例如矩形、圆形、折线、多边形、扇形、文字等，图形语法就是一种通过描述几何图形与数据字段关系的一种理论框架。
例如：柱状图的主要几何元素是矩形，矩形具有的几何属性包括：长、宽、填充色、位置等，通过描述矩形的几何属性与数据的关系，就可以描述一张图表。而在这个例子中，矩形的几何属性就被称为视觉通道。
比例尺
比例尺就是一般意义上理解的比例尺，与常见的地图比例尺定义基本一致。其在数据可视化中的定义为建立数据域（原始数据）与显示域（显示像素）之间的映射关系。
其中根据对应数据的类型与特性，可能有不同的比例尺，例如离散数据可以对应离散比例尺，连续数据可以对应线性或非线性的比例尺。合理地利用匹配的比例尺能够使数据中具有的特征更加直观。
坐标系
作为可视化图形和比例尺的主要容器，其作用就是为所有可视化图形提供绘制展示的区域，通常在不同性质的数据中使用合适的坐标系，能够更好的展示图形中所承载的数据。
常见的坐标系包括笛卡尔坐标系、极坐标系、球面坐标系等。其中常见的地图也可以理解为一种地理坐标，其中由经纬度组成的地理坐标，可以在其中进行球面或平面的映射。
数据产品中的可视化应用
数据产品的类型很多，其中的运行机制也形态各异。但涉及到可视化的应用，则有一套规范化的流程。我们通常会认为数据可视化主要影响数据的展示环节，实际应用中，根据数据具体包含的语义，数据准备环节往往也与可视化紧密相关。
这里采用自顶向下的顺序进行分析，即先按照预期展示，一步步向数据源头分析。首先需要确定想要展示的数据具备哪些特性，可以参考下图进行确定：
确定了要展示的图表类型后，需要思考对应图表中具有哪些维度指标，参考我们前文提到的定义，维度用来切分数据集，而指标用来衡量数据长度。
这里使用一个气泡图来进行分析。
这是一个以圆形图形作为基本图元的图表。因此，我们现在逐个分析其图形的属性。
首先，对于图中每一个圆形图形而言，其坐标位置一定具有其数据意义，每一个气泡对应的位置即x、y坐标，可以看到其对应的x、y轴均为线性连续数轴，因此这里明确需要两个连续类型的数据字段作为其坐标，在本图中即为“销售额”与“利润”。
其次，除了坐标以外，每个气泡具有的属性还有半径和颜色，通过颜色与图例的对应关系可知：此时颜色对应的是各个地区，而地区是离散的，因此，这里需要一个离散型数据类型与颜色进行关联，当然连续型的数据也可以作为颜色的字段，只不过将不具备维度的切分属性，颜色也将会由离散颜色替换为渐变颜色。
最后就是半径了，这个非常明显代表的也是一个连续字段，半径的大小可以体现对应数据字段的长度。
其实，还有一个容易被忽略的细分维度，即切分数据项的另外一个维度。如果将维度理解为数据表的主键，多个维度代表多主键，那么，一定不会出现所有主键值相同的情况。因此，我们分析至此，只找到了一个维度即颜色，那么按照上述原理，是不应该出现相同颜色的气泡，而出现这种情况即代表其还有一个细分维度。
通过以上的总结，我们可以获得上图示例的气泡所需要的数据内容，其中包含两个离散的维度分别是颜色和细分；包含三个连续的指标分别是横坐标、纵坐标以及半径。
可视化的过程就是在数据与视觉通道之间建立映射关系，从而使规范化的数据能够通过以上属性影响图形的显示，进而实现图表的展示。
了解了所需要数据字段的组成，接下来就是通过数据准备阶段来获取上述数据，这个过程需要根据业务中的场景自行处理，这里简单说一下流程。
数据准备的过程通常被分解为 ETL 三个阶段，即数据抽取（Extraction）、数据转换（Transformation）、数据装载（Loading）。抽取阶段一般代表从各个来源获取原始数据，包括数据库、网页爬虫、采集数据甚至人工录入等。而数据转换则是对抽取获得的数据进行初步处理的过程，包括数据清洗、数据结构规范化等操作。而数据装载则指将转换后的数据加载进数据仓库中。经过 ETL 的数据即可作为数据产品的数据源使用，其中对应上文中说到的使用场景，从数据仓库中提取对应的数据字段或数据列并与可视化图表的视觉通道进行绑定。
总结
随着数据产品的功能日益复杂，对于产品中可视化的展示往往也呈现出高定制化、高自由度的趋势。
如果在数据产品中，没有定义一个清晰明确的可视化逻辑，就很容易陷入产品演进的误区，可能在后续的功能迭代中，开发成本会不可控地快速上升。
因此笔者认为，在设计一款数据产品时，需要明确产品中的可视化部分与产品自身的数据是如何进行关联的，要在产品中保持可视化部分的统一逻辑，避免盲目地堆砌功能，从而造成开发成本不可控。如果能从可视化原理的角度入手设计数据产品，那么会极大地降低后续迭代的风险，使得产品更加稳定和高效。
The End
如果你觉得这篇文章对你有帮助，有启发，我想请你帮我2个小忙：
1、点个「在看」，让更多的人也能看到这篇文章内容；
2、关注公众号「豆皮范儿」，公众号后台回复「加群」 加入我们一起学习；
关注公众号的福利持续更新，公众号后台送学习资料：
1、豆皮范儿后台回复「vis」，还可以获取更多可视化免费学习资料。
2、豆皮范儿后台回复「webgl」，还可以获取webgl免费学习资料。
3、豆皮范儿后台回复「算法」，还可以获取算法的学习资料。
4、豆皮范儿后台回复「招聘」，获取各种内推。
字节跳动数据平台前端团队，在公司内负责大数据相关产品的研发。我们在前端技术上保持着非常强的热情，除了数据产品相关的研发外，在数据可视化、海量数据处理优化、web excel、WebIDE、私有化部署、工程工具都方面都有很多的探索和积累，有兴趣可以与我们联系。
更多精彩文章，欢迎关注 “豆皮范儿”